<template>
	<div>
		<!-- 头部面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<!-- 查询行 -->
			<el-row :gutter="20">
				<!-- <el-col :span="6">
					<el-input @clear="searchUserList" placeholder="userid" v-model="custId" clearable>
						<el-button slot="append" @click="searchUserList" icon="el-icon-search"></el-button>
					</el-input>
				</el-col> -->
				<el-col :span="3">
					<el-input v-model="custId" placeholder="手机号/userid"></el-input>
				</el-col>
				<el-col :span="3">
					<el-input v-model="seachlist.channelNo" placeholder="输入流量标识"></el-input>
				</el-col>
				<!-- <el-col :span="3">
					<el-select v-model="seachlist.creditType" placeholder="选择授信状态">
						<el-option value="" label="请选择授信状态"></el-option>
					    <el-option key="common" label="授信成功" value="common"></el-option>
					  </el-select>
				</el-col> -->
				<el-date-picker
					v-model="value1"
					type="daterange"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					@change="changeDate">
				</el-date-picker>
				<el-button type="primary" @click="searchUserList">搜索</el-button>
				<el-button @click="clear">清空</el-button>
				<el-button type="primary">导出</el-button>
			</el-row>
			<!-- 用户列表 -->
			<el-table :data="userList" border stripe>
				<el-table-column min-width='130px' label="userid" prop="custId"></el-table-column>
				<el-table-column min-width='100px' label="手机号" prop="phone"></el-table-column>
				<el-table-column label="性别">
					<template slot-scope="scope">
						<span v-if="scope.row.sex">{{scope.row.sex == 'F' ? '女' : '男'}}</span>
					</template>
				</el-table-column>
				<el-table-column label="注册时间" prop="createTime"></el-table-column>
				<el-table-column label="来源" prop="registerSource"></el-table-column>
				<el-table-column label="渠道" prop="channelCode"></el-table-column>
				<!-- <el-table-column label="是否实名" prop="realCertify"></el-table-column>
				<el-table-column label="是否绑卡" prop="bankcardCertify"></el-table-column>
				<el-table-column label="授信额度" prop="creditAmount"></el-table-column>
				<el-table-column label="可用额度" prop="usableAmount"></el-table-column> -->
				<el-table-column label="上次登录设备" prop="platFrom"></el-table-column>
				<el-table-column label="借款记录">
					<template slot-scope="scope">
						<el-tooltip :enterable="false" effect="dark" content="查看" placement="top">
							<el-button @click="toloantran(scope.row.custId)" size="small" type="primary" icon="el-icon-link"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="购买记录">
					<template slot-scope="scope">
						<el-tooltip :enterable="false" effect="dark" content="查看" placement="top">
							<el-button @click="topurchase(scope.row.custId)" size="small" type="primary" icon="el-icon-link"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip :enterable="false" effect="dark" content="查看详情" placement="top">
							<!-- <el-button @click="showUserDialog(scope.row.custId)" size="mini" type="primary">查看详情</el-button> -->
							<div @click="showUserDialog(scope.row.custId)"  class="tablelist-li-tit">查看详情</div>
						</el-tooltip>

						<el-tooltip :enterable="false" effect="dark" content="修改渠道" placement="top">
							<div @click="showEditUserChannelDialog(scope.row.custId)"  class="tablelist-li-tit">修改渠道</div>
						</el-tooltip>

						<el-tooltip :enterable="false" effect="dark" content="浏览历史" placement="top">
							<div @click="showBrowseLogDialog(scope.row.custId)"  class="tablelist-li-tit">浏览历史</div>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageNum"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<!-- 查看详情弹窗 -->
			<el-dialog
			  title="用户详情信息"
			  :visible.sync="UserDialogVisible"
			  width="80%"
			  class="userDialog">
				<el-tabs v-model="activeName" @tab-click="handleClick">
				    <el-tab-pane label="注册信息" name="one">
						<el-form ref="userFormRef" :model="userForm" label-width="110px">
							<el-form-item label="userid">
								<el-input v-model="userForm.custId" disabled></el-input>
							</el-form-item>
							<el-form-item label="手机号">
								<el-input v-model="userForm.phone" disabled></el-input>
							</el-form-item>
							<el-form-item label="注册时间">
								<el-input v-model="userForm.createTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="注册来源">
								<el-input v-model="userForm.registerSource" disabled></el-input>
							</el-form-item>
							<el-form-item label="是否实名">
								<el-input v-model="userForm.realCertify" disabled></el-input>
							</el-form-item>
							<el-form-item label="照片">
								<el-button type="primary" @click="showPic" plain>查看</el-button>
							</el-form-item>
							<el-form-item label="身份证照片">
								<el-button type="primary" @click="showcardPic" plain>查看</el-button>
							</el-form-item>
							<el-form-item label="用户姓名">
								<el-input v-model="userForm.custName" disabled></el-input>
							</el-form-item>
							<el-form-item label="身份证号">
								<el-input v-model="userForm.idCard" disabled></el-input>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="详细信息" name="two">
						<el-form ref="userFormRef" :model="userForm" label-width="110px">
							<el-form-item label="是否绑卡">
								<el-input v-model="userForm.bankcardCertify" disabled></el-input>
							</el-form-item>
							<el-form-item label="银行卡">
								<el-input v-model="userForm.bankcardNo" disabled></el-input>
							</el-form-item>
							<el-form-item label="可用额度">
								<el-input v-model="userForm.usableAmount" disabled></el-input>
							</el-form-item>
							<el-form-item label="是否借款">
								<el-input v-model="userForm.auditStatus" disabled></el-input>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="其他信息" name="three">
						<el-form ref="userFormRef" :model="userForm" label-width="110px">
							<el-form-item label="上次登录时间">
								<el-input v-model="userForm.enterTime" disabled></el-input>
							</el-form-item>
							<el-form-item label="上次登录设备">
								<el-input v-model="userForm.platFrom" disabled></el-input>
							</el-form-item>
							<el-form-item label="家庭住址">
								<el-input v-model="userForm.homeAddress" disabled></el-input>
							</el-form-item>
							<el-form-item label="公司名称">
								<el-input v-model="userForm.workName" disabled></el-input>
							</el-form-item>
							<el-form-item label="工作地址">
								<el-input v-model="userForm.workAddress" disabled></el-input>
							</el-form-item>
							<el-form-item label="联系人姓名">
								<el-input v-model="userForm.contactName" disabled></el-input>
							</el-form-item>
							<el-form-item label="联系人手机号">
								<el-input v-model="userForm.contactPhone" disabled></el-input>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-tabs>
				 <span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="UserDialogVisible = false">关闭</el-button>
				</span>
			</el-dialog>
			
			<!-- 照片弹窗 -->
			<el-dialog
			  title="照片"
			  :visible.sync="PicDialogVisible"
			  width="60%" class="popup">
				<img class="dialog-img" :src="userForm.fileVOList[2].filePath" style="width: 30%;" />
			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="PicDialogVisible = false">关闭</el-button>
			  </span>
			</el-dialog>

			<!-- 身份证照片弹窗 -->
			<el-dialog
			  title="照片"
			  :visible.sync="CardDialogVisible"
			  width="60%" class="popup">
					<div style="display: flex;">
						<div class="popup-img2" v-for="(item,index) in userForm.fileVOList" v-if="index != 2">
							<img class="dialog-img" :src="item.filePath" :style="{transform:'rotateZ('+item.deg+'deg)'}"/>
							<div style="margin-top: 80px;"> <el-button type="primary" @click="rotate(index)">旋转</el-button></div>
						</div>
					</div>
				  <span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="CardDialogVisible = false">关闭</el-button>
				  </span>
			</el-dialog>

			<!-- 修改渠道 --->
			<el-dialog  title="修改渠道"
			  :visible.sync="EditChannelDialogVisible"
			  width="60%" class="userDialog">

				<el-form ref="userFormRef" :model="userForm" label-width="110px">
							<el-form-item label="userid">
								<el-input v-model="userForm.custId" disabled></el-input>
							</el-form-item>
							<el-form-item label="手机号号码">
								<el-input v-model="userForm.phone" disabled></el-input>
							</el-form-item>
								<el-form-item label="渠道">
								 <el-select
										v-model="userForm.channelCode"
										filterable
										remote
										reserve-keyword
										placeholder="请输入渠道名称">
										<el-option v-for="item in channelData" :key="item.channelCode" :label="item.channelName" :value="item.channelCode">
										</el-option>
									</el-select>
							</el-form-item>
						</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="updateChannel()">保存</el-button>
					<el-button type="primary" @click="EditChannelDialogVisible = false">关闭</el-button>
				  </span>
			</el-dialog>

			<!-- 浏览历史 --->

			<el-dialog  title="浏览历史"
			  :visible.sync="browseLogDialogVisible"
			  width="60%" class="userDialog">
			  <el-row :gutter="20">
				  
				<el-col :span="3">
					<el-button type="primary" @click="refreshLoanMarketLog">刷新</el-button>
				</el-col>
			  </el-row>
				<el-table :data="loanMarketLogData" border stripe>
					<el-table-column label="注册时间"  prop="phone"></el-table-column>
					<el-table-column label="贷超名称"  prop="loanMarketName"></el-table-column>
					<el-table-column label="ip"  prop="ip"></el-table-column>
					<el-table-column label="点击时间"  prop="clickTime"></el-table-column>
					<el-table-column label="点击链接"  prop="loanMarketUrl"></el-table-column>
				</el-table>

					<!-- 分页 -->
				<el-pagination
					@size-change="logHandleSizeChange"
					@current-change="logHandleCurrentChange"
					:current-page="loanMarketLog.pageNum"
					:page-size="loanMarketLog.pageSize"
      				layout="total, sizes ,prev, pager, next ,jumper"
					:total="loanMarketLog.total">
					</el-pagination>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="browseLogDialogVisible = false">关闭</el-button>
				  </span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList:[],/* 用户列表 */
				custId: '',
				total:0,/* 总页数 */
				pageSize:20,/* 每页几条 */
				pageNum:1,/* 当前为哪页 */
				UserDialogVisible:false,/* 用户详情弹窗开启状态 */
				value1:'',/* 选择查询日期*/
				userForm:{
					custId: "",
					phone: "",
					createTime: "",
					registerSource: "",
					realCertify: "",
					custName: "",
					idCard: "",
					bankcardCertify: "",
					bankcardNo: "",
					usableAmount: "",
					auditStatus: "",
					enterTime: "",
					platFrom: "",
					homeAddress: "",
					workName: "",
					workAddress: "",
					contactName: "",
					contactPhone: "",
					fileVOList:[{"fileVOList":''},{"fileVOList":''},{"fileVOList":''}]
				},/* 用户详情列表 */
				CardDialogVisible:false,/* 身份证弹窗 */
				PicDialogVisible:false,/* 身份证弹窗 */
				seachlist:{'phone':'','custId':'','startTime':'','endTime':'','channelNo':'','creditType':'','identityType':''},/* 查询信息 */
				fullscreenLoading: false,
				activeName:'one',/* 选项卡 */

				/**
				 * 修改渠道
				 */
				EditChannelDialogVisible:false,
				channelData:[],
				//浏览历史
				browseLogDialogVisible:false,
				loanMarketLogData:[],
				loanMarketLog:{
					total:0,/* 总页数 */
					pageSize:10,/* 每页几条 */
					pageNum:1,/* 当前为哪页 */
					custId:""

				}
			}
		},
		created() {
			this.seachlist.phone = this.$route.query.phone/* 根据手机号查询列表，获取从跳转页面传来的phone */
			this.getUserList()
		},
		methods: {
			clear(){
				this.seachlist = {'phone':'','custId':'','startTime':'','endTime':'','channelNo':'','creditType':'','identityType':''}
				this.getUserList()
			},
			rotate(index){/* 旋转图片 */
				this.userForm.fileVOList[index].deg += 90;
				if(this.userForm.fileVOList[index].deg >= 360){
					this.userForm.fileVOList[index].deg = 0
				}
			},
			async getUserList(){/* 获取用户列表 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/customer/list',{pageSize:this.pageSize,pageNum:this.pageNum,phone:this.seachlist.phone,custId:this.seachlist.custId,channelNo:this.seachlist.channelNo,startTime:this.seachlist.startTime,endTime:this.seachlist.endTime,creditType:this.seachlist.creditType,identityType:this.seachlist.identityType })
				// console.log(res);
				this.userList = res.data.customerList
				this.total = res.data.total
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			toloantran(custId){/* 跳转到交易管理，借款管理 */
				this.$router.push({path:'/Loantransaction', query:{'custId': custId}})
			},
			topurchase(custId){/* 跳转到交易管理，购买管理 */
				this.$router.push({path:'/Purchasetransaction', query:{'custId': custId}})
			},
			tostagestran(custId){/* 跳转到交易管理，购买管理 */
				this.$router.push({path:'/stagesTrading', query:{'custId': custId}})
			},
			searchUserList(){/* 查询按钮，把查询参数全都放到一个集合里面 */
				var _self = this
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.custId))) {
					_self.seachlist.phone=this.custId
				}else if(/\C/.test(this.custId)){
					_self.seachlist.custId=this.custId
				}else{
					_self.seachlist.phone = ''
					_self.seachlist.custId = ''
				} 
				this.getUserList()
			},
			changeDate(e){/* 修改日期 */
				if(e == null){
					this.seachlist.startTime = ''
					this.seachlist.endTime = ''
				}else{
					this.seachlist.startTime = e[0]
					this.seachlist.endTime = e[1]
				}
				
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getUserList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.pageNum = val
				this.getUserList()
			},
			async showUserDialog(custId){/* 查看用户详情 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/customer/findCustomerInfoByCustId',{custId:custId})
				/* 打开详情弹窗 */
				this.UserDialogVisible = true
				/* 为图片添加旋转角度参数 */
				res.data.fileVOList.forEach((item,index) => {
					this.$set(item,'deg',0)
					this.$set(item,'multiples',1)
				})
				this.userForm = res.data
				
				console.log(this.userForm);
				setTimeout(() => {
				  loading.close();
				}, 2000);
			},

			async showEditUserChannelDialog(custId){/* 修改渠道详情 */
				 const {data:res} = await this.$http.post('/customer/findCustomerInfoByCustId',{custId:custId})
				// /* 打开详情弹窗 */
				this.EditChannelDialogVisible = true
				this.userForm = res.data

				await this.listChannel();
			},
			async listChannel(){
				let channellist={pageSize:1000,pageCount:1,isOpen:'1'}
				const {data:res} = await this.$http.post('/outLinkChannel/listChannel',channellist)
				console.log(res)
				this.channelData=res.data.records
			},
			async updateChannel(){
				let model={ 
					'custId':this.userForm.custId,
					'channelCode':this.userForm.channelCode
				};
				const {data:res} = await this.$http.post('/customer/updateChannelByCustId',model)

				console.log(res)
				if(res.code ==200){
					this.$message.success('更新成功');
					this.EditChannelDialogVisible = false;
					this.searchUserList()
				} 
				
			},
			showBrowseLogDialog(custId){/* 浏览历史 */
				this.loanMarketLog.custId=custId;
				this.listLoanMarketLog();

				// /* 打开详情弹窗 */
				this.browseLogDialogVisible = true
			},
			async listLoanMarketLog(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				let queryParms={
					pageSize:this.loanMarketLog.pageSize,
					pageNum:this.loanMarketLog.pageNum,
					custId:this.loanMarketLog.custId
				}
				
				console.log(queryParms)
				const {data:res} = await this.$http.post('/loanMarketLog/list',queryParms)
				this.loanMarketLogData = res.data.records
				this.loanMarketLog.total = res.data.total

				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			logHandleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.loanMarketLog.pageSize = val
				this.listLoanMarketLog()
			},
			logHandleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.loanMarketLog.pageNum = val
				this.listLoanMarketLog()
			},
			refreshLoanMarketLog(){

				this.loanMarketLog.pageNum = 1
				this.listLoanMarketLog()
			},
			showPic(){
				this.PicDialogVisible = true
			},
			showcardPic(){
				this.CardDialogVisible = true
			},
			handleClick(tab, event) {
				console.log(this.activeName);
			},
		}
	}
</script>

<style lang="less" scoped>
	.tablelist-li-tit{
		font-size: 12px;
		color: #3878EA;
		margin-bottom: 4px;
		cursor: pointer;
	}
	.userDialog{
		.el-form{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.el-form-item{
				width: 48%;
			}
		}
	}
	.popup{
		text-align: center;
	}
	.popup-img2{
		width: 100%;
	}
	.dialog-img{
		width: 70%;
	}
</style>
